/* eslint-disable react/prop-types */
import React from 'react';
import { Form, Input, Button, Select } from 'antd';

const { Option } = Select;

class ToolsForm extends React.Component {
  static defaultProps = {
    columns: [],
    data: []
  }
  constructor(props) {
    super(props)
    this.state = {}
  }

  //重置
  handleReset = () => {
    this.props.form.resetFields()
  }

  //查询
  handleSearch = () => {
    const { handleRow } = this.props
    handleRow('search', this.props.form.getFieldsValue())
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { tools } = this.props;
    let formItems = (tools || []).map((item, index) => {
      let options = []
      if (item.type == 'select') {
        options = item.option.map((item, index) => {
          return (
            <Option key={index} value={item.value}>{item.name}</Option>
          )
        })
      }
      return (
        <Form.Item label={item.label} key={index}>
          {getFieldDecorator(item.key, {
            initialValue: ''
          })(
            item.type == 'select' ? <Select placeholder="全部" style={{ width: 150 }} >{options}</Select> : <Input placeholder={item.label} />
          )}
        </Form.Item>
      )
    });
    let FormDom;
    if (formItems.length > 0) {
      FormDom = (
        <Form layout="inline" onSubmit={this.handleSubmit}>
          {formItems}
          <Form.Item>
            <Button type="default" style={{ marginRight: '8px' }} onClick={this.handleReset}>重置</Button>
            <Button type="primary" htmlType="submit" onClick={this.handleSearch}>查询</Button>
          </Form.Item>
        </Form>
      )
    }
    return (
      FormDom || ''
    )
  }
}
export default Form.create()(ToolsForm)
